<template>
    <view class="cart_layout">
        <!-- 列表部分 -->
        <view class="entry" v-for="(item,index) in cart" :key="item.goods_id">
            <view @tap='toggleChecked(index)' class="select iconfont " :class="item.checked ? 'icon-xuanzhong' : 'icon-xuanze'"></view>
            <view class="wares">
                <image :src="item.goods_small_logo || '/static/empty.png'"></image>
            </view>
            <view class="info">
                <view class="text">{{item.goods_name}}</view>
                <view class="price">
                    <view class="left">￥{{item.goods_price}}</view>
                    <view class="right">
                        <view class="iconfont icon-jianshao1 sub" @tap="changeCounter('reduce', index)"></view>
                        <view class="num">{{item.counter}}</view>
                        <view class="iconfont icon-tianjia add" @tap="changeCounter('add', index)"></view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 结算部分 -->
        <view class="sum">
            <!-- icon-xuanzhong
            icon-xuanze -->
            <view class="left" @tap="toggleAllchecked">
                <view class="select iconfont" :class="allChecked?'icon-xuanzhong': 'icon-xuanze'"></view>
                <view class="allselect">全选</view>
                <view class="count">
                    <text class="total">合计:</text>
                    <text class="money">￥{{totalPrice}}</text>
                </view>
            </view>
            <view class="right" @tap="goToPay">去结算({{totalProduct}})</view>
        </view>
    </view>
</template>

<script>
import http from '@/utils/http.js';
export default {
    data(){
        return{
            // 购物车数组
            cart:[],
            totalPrice: 0,
        }
    },
    computed:{
        //判断购物车数组是否全为true,如果是返回true否则false
        allChecked(){
            let isAllChecked=true;
            this.cart && this.cart.forEach(item=>{
                //如果有一个没选那就全选为false
                if(!item.checked){
                    isAllChecked=false
                }
            })
             return isAllChecked
        },
        //结算商品的数量
        totalProduct(){
            let count=0;
            let price=0;
            this.cart && this.cart.forEach(item=>{
                //判断是否选中
                if(item.checked){
                    count=count+item.counter;
                    price=price+item.goods_price * item.counter;
                }
            })
            this.totalPrice=price;
            return count;
        }
    },
    onShow(){
        this.getCart();
    },
    onHide(){
        //添加到Storage中
        uni.setStorage({
            key:'cart',
            data:this.cart
        })
    },
    methods:{
        //从Storage中的获取
        getCart(){
            this.cart=uni.getStorageSync('cart')
        },
        //切换当前商品数据的选中和不选中的状态
        toggleChecked(index){
            //修改cart数组中的数据,选中为true,否则为false
            this.cart[index].checked=!this.cart[index].checked;
            this.cart=Object.assign([],this.cart);
        },
        //修改商品的加减数量
        changeCounter(action,index){
            const counter=this.cart[index].counter;
            if(action === 'add'){
                this.cart[index].counter=counter+1;
            }else{
                //当减为0时,删除该商品
                if(counter === 1){
                    uni.showModal({
                        title:'提示',
                        content:'确定要删除该商品吗?',
                        success:(e)=>{
                            e.confirm && this.deleteProduct(index)
                        }
                    })
                }else{
                    this.cart[index].counter=counter-1;
                }
            }
        },
        deleteProduct(index){
            this.cart.splice(index,1);
        },
        //全选按钮
        toggleAllchecked(){
            //把所有的商品状态改为一致
            const status=this.allChecked;
            this.cart.forEach(item=>{
                item.checked=!status;
            })
            this.cart=Object.assign([],this.cart);
        },
        //结算
        goToPay() {
            if(this.totalProduct !==0){
                uni.navigateTo({
                    url: '/pages/pay/index'
                })
            } else {
                uni.showToast({
                    title:'请选择结算商品',
                    icon:'none'
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
    .cart_layout{
        padding: 19rpx;
        .entry{
            display: flex;
            align-items: center;
            width: 698rpx;
            height: 209rpx;
            .select{
                font-size: 42rpx;
                margin-bottom: 30rpx;
            }
            .icon-xuanze {
			    color: #b1b1b1;
		    }
		    .icon-xuanzhong {
			    color: #e03440;
		    }
            .wares{
                image{
                    width: 191rpx;
                    height: 191rpx;
                    padding-left: 35rpx;
                }
            }
            .info{
                padding-left: 20rpx;
                .text{
                    color: #7a7a7a;
                    font-size: 26rpx;
                    margin-bottom: 50rpx;
                }
                .price{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 28rpx;
                    font-weight: bold;
                    .left{
                        color: #ec5662;
                    }
                    .right{
                        display: flex;
                        align-items: center;
                        color: #a1a1a1;
                        font-weight: 500;
                        .sub{
                             font-size: 45rpx;
                             padding-right: 15rpx;
                        }
                        .num{
                             padding-right: 15rpx;
                        }
                        .add{
                             font-size: 45rpx;
                        }
                    }
                }
            }
        }
        .sum{
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            height: 83rpx;
            padding: 0 21rpx 0 23rpx;
            background-color: #fdfdfd;
            .left{
                display: flex;
                align-items: center;
                .select{
                    font-size: 48rpx;
                }
                .icon-xuanze {
			        color: #b1b1b1;
		        }
		        .icon-xuanzhong {
			        color: #e03440;
		        }
                .allselect{
                    color: #ababab;
                    font-size: 22rpx;
                    margin: 0 24rpx;
                }
                .count{
                    .total{
                        font-size: 30rpx;
                        font-weight: 300;
                    }
                    .money{
                        margin-left: 20rpx;
                        color: #eb4956;
                    }
                }
            }
            .right{
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 24rpx;
                width: 150rpx;
                height: 52rpx;
                background-color: #ea4350;
                border-radius: 26rpx;
                color: #fff;
                padding: 5rpx;
            }
        }
    }
</style>